<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<u-search v-model="keyword" :showAction="true" actionText="搜索"
		 :animation="false" placeholder="单号关键字搜索" @custom="custom"></u-search>
		
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in navList" :key="index" >
				<view :class="{'active':isActive === index}" @click="checked(index)">
				{{item.title}}
				<!-- <text style="color: red;">({{item.length}})</text> -->
				</view>
			</view>
		</view>
			<view class="nav_item" v-if="isActive==0">
				<view class="newBxBox">
					<view class="top">
						<text>待铆检确认<text style="color: red;">({{oneLength}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单号：{{item.YNUM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">设备：{{item.ITMDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请项目：{{item.YSQSYXM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请内容：{{item.YDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请人：{{item.YSQDNAM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请时间：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="font-size: 24rpx;color: #13d5f6; margin-top: 40rpx;margin-left: 50rpx;">去处理 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view class="newBxBox">
					<view class="top">
						<text>待检验师审核<text style="color: red;">({{oneLength2}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData2" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单号：{{item.YNUM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">设备：{{item.ITMDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请项目：{{item.YSQSYXM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请内容：{{item.YDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">检验员：{{item.YSQDNAM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">编制日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 50rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==2">
				<view class="newBxBox">
					<view class="top">
						<text>待现场确认<text style="color: red;">({{oneLength3}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData3" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单号：{{item.YNUM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">设备：{{item.ITMDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请项目：{{item.YSQSYXM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请内容：{{item.YDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">审核人：{{item.YSQDNAM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">审核日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 50rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==3">
				<view class="newBxBox">
					<view class="top">
						<text>已完成<text style="color: red;">({{oneLength4}})</text>
						</text>
					</view>
					<view class="container" v-for="(item, index) in twoData4" :key="index">
						<view class="container-left"></view>
						<view class="container-right">
							<view class="z" style="width: 70%;">
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">单号：{{item.YNUM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">设备：{{item.ITMDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请项目：{{item.YSQSYXM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">申请内容：{{item.YDES}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">审核人：{{item.YSQDNAM}}</p>
								<p style="color: gray;font-size: 20rpx;padding-left: 20rpx;">审核日期：{{item.YDAT}}</p>
							</view>
							<view class="y" @click="wslGotoCd(item)">
								<p style="margin-left: 40rpx;font-size: 24rpx;color: #13d5f6; margin-top: 50rpx;">详情 ></p>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				YSSQNUM:'',
				isActive: 0,
				resR:[],
				twoData:[],
				twoData2:[],
				twoData3:[],
				twoData4:[],
				navList:[
					{
						index: 0,
						title: '待铆检确认',
						length: 0,
					},{
						index: 1,
						title: "待检验师审核",
						length: 0,
					},{
						index: 2,
						title: "待现场确认",
						length: 0,
					},{
						index: 3,
						title: "已完成",
						length: 0,
					}
				],
				userInfo: {},
				oneLength:0,
				oneLength2:0,
				oneLength3:0,
				oneLength4:0,
				dataList:[],
			}
		},
		created() {
		  this.checked(this.isActive);  // 根据当前标签的索引调用对应的接口
		},
		onLoad(query) {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			async custom(val){
				this.YSSQNUM=val;
				this.checked(this.isActive)
				
			},
			async checked(index) {
				this.isActive = index
				let GRP1 = {
						GRP1: [{
							YNUM:this.YSSQNUM,
							YFLG:this.isActive+1,
							YSQDNAM:this.userInfo.NAME
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTPCTH",GRP1)
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1
					this.resR=[]
					this.twoData=[]
					this.twoData2=[]
					this.twoData3=[]
					this.twoData4=[]
					for(let i=0;i<this.dataList.length;i++){
						if(this.dataList[i].YTYPE==2){
							this.dataList[i].YSQSYXM='硬度'
						}else if(this.dataList[i].YTYPE==3){
							this.dataList[i].YSQSYXM='铁素体'
						}else if(this.dataList[i].YTYPE==4){
							this.dataList[i].YSQSYXM='PMI'
						}else{
							this.dataList[i].YSQSYXM='/'
						}
					}
					if (resR1.GRP2.WOK==0){
						if(index==0){
							this.twoData=this.dataList
						}
						if(index==1){
							this.twoData2=this.dataList
						}
						if(index==2){
							this.twoData3=this.dataList
						}
						if(index==3){
							this.twoData4=this.dataList
						}
					}
					this.oneLength = this.twoData.length
					this.oneLength2 = this.twoData2.length
					this.oneLength3 = this.twoData3.length
					this.oneLength4 = this.twoData4.length
					if(this.oneLength==100){this.oneLength='100+'}
					if(this.oneLength2==100){this.oneLength2='100+'}
					if(this.oneLength3==100){this.oneLength3='100+'}
					if(this.oneLength4==100){this.oneLength4='100+'}
					this.navList[0].length = this.oneLength
					this.navList[1].length = this.oneLength2
					this.navList[2].length = this.oneLength3
					this.navList[3].length = this.oneLength4
					console.log("this.dataList",this.dataList)
			},
			wslGotoCd(a){
				a.YFLG=this.isActive+1
				uni.navigateTo({url:"/pages/dzzxPages/dzzxmPages?dataH="+JSON.stringify(a)})
				return
			}
		}
	}
</script>

<style>
.tab_nav{
	background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #13d5f6;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 8rpx;
		background-color:  #13d5f6;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.newBxBox{
		margin-top: 25rpx;
		background-color: white;
	}
	.top{
		height: 50rpx;
		line-height: 50rpx;
		color: gray;
		padding-left: 20rpx;
	}
	.container{
		/* height: 200rpx; */
		border: 1px solid #ccc;
		display: flex;
		margin-bottom: 20rpx;
	}
	.container-left{
		width: 150rpx;
		border: 1px solid #ccc;
	}
	.container-right{
		width: 538rpx;
		display: flex;
	}
</style>
